<template>
  <div style="position: relative">
      <span style=" font-size: 16px;color: #595959;position: absolute;top: 21px;left: 30px;">{{$t('login.retrievalMethod')}}</span>
      <span class="re-login" @click.stop="returnLogin">{{$t('login.reLogin')}}</span>
      <el-col :span="24" class="forget-form-type">
        <span @click.stop="changeForgetType('phone')" class="type" :class="forgetType === 'phone' ? 'active1' : ''">{{$t('login.mobilePhoneRetrieval')}}</span>
        <span class="line" v-show="!isOem">|</span>
        <span v-show="!isOem" @click.stop="changeForgetType('email')" :class="forgetType === 'email' ? 'active1' : ''" class="type">{{$t('login.emailRetrieval')}}</span>
        <span class="line">|</span>
        <span @click.stop="changeForgetType('admin')" :class="forgetType === 'admin' ? 'active1' : ''" class="type">{{$t('login.adminReset')}}</span>
      </el-col>
      <el-col :span="24" v-show="forgetType === 'phone'">
          <phonePwd @returnLogin="returnLogin" ref="phonePwd"></phonePwd>
      </el-col>
    <el-col :span="24" v-show="forgetType === 'email'">
      <emailPwd @returnLogin="returnLogin" ref="emailPwd" @reForgetPanel="reForgetPanel"></emailPwd>
    </el-col>
      <el-col :span="24" v-show="forgetType === 'admin'" class="forget-admin">
        <div class="forget-admin-img"><i class="icon iconfont icon-dianhua"></i></div>
        <div class="forget-admin-conent">{{$t('login.adminResetContent')}}</div>
        <div class="forget-admin-btn"><span @click.stop="returnLogin">{{$t('public.Iknow')}}</span></div>
      </el-col>
  </div>
</template>

<script>
  import phonePwd from './phonePwd'
  import emailPwd from './emailPwd'
  export default {
    name: 'loginModule',
    components: {
      phonePwd,
      emailPwd
    },
    data () {
      return {
        forgetType: 'phone'
      }
    },
    props: {
      isEnglis: String
    },
    computed: {
      isOem () {
        return this.$store.state.isOem
      }
    },
    methods: {
      reForgetPanel () {
        this.forgetType = 'phone'
        this.$nextTick(function () {
          this.$refs.phonePwd.resetForm()
        })
      },
      returnLogin () {
        this.$emit('returnLogin')
      },
      changeForgetType (val) {
        this.forgetType = val
      }
    },
    watch: {
//      isEnglis () {
//        this.$nextTick(function () {
//          this.$refs.phonePwd.changeLang(this.isEnglis)
//          this.$refs.emailPwd.changeLang(this.isEnglis)
//        })
//      }
    },
    mounted () {
//      this.$nextTick(function () {
//        debugger
//        this.$refs.phonePwd.changeLang(this.isEnglis)
//        this.$refs.emailPwd.changeLang(this.isEnglis)
//      })
    },
    beforeMount () {}
  }
</script>
<style lang="stylus" scoped>
  @import "styl/forget.styl"
  @import "../../../assets/common.styl"
  .re-login
    position absolute
    cursor: pointer;
    position: absolute;
    color: #459ae9;
    right: 20px;
    top: 20px;
    text-decoration: underline;
  .text-center
    text-align center
  .icon
    font-size 20px
    color #a6a6a6
  h1
  h2
    font-weight normal
  a
    color  $c-main
  .active1
    color #459ae9
  .forget
    position relative
    .forget-form-type
      text-align center
      margin-top: 60px;
      margin-bottom: 50px;
      font-size: 14px;
      line-height: 14px;
      color #000
      .line
        padding 0px 20px
        color #a6a6a6
      .type
        cursor pointer
      .type:hover
        color #459ae9
    .forget-admin
      text-align center
      .icon-dianhua
        border-radius: 50%;
        padding: 8px;
        background-color: #bfbfbf;
        color: #fff;
      .forget-admin-img
        margin-top 20px
      .forget-admin-conent
        color #a6a6a6
        margin: 20px 70px 30px 70px
      .forget-admin-btn
        span
          color #fff
          background-color #459ae9
          padding: 12px 36px;
          border-radius 4px
          cursor pointer
</style>
